<template>
  <div class="coupon-config">
    <h3 class="title">配置优惠券</h3>

    <!-- 优惠券列表 -->
    <div class="select-coupon">
      <ul class="clearfix">
        <li :class="['coupon-box', 'item', 'center-h-v', selectedCoupon === index+1 ? 'selected' : '']"
            v-for="(item, index) in wxCoupon"
            :key="index"
            @click="handleSelect(index)">
          <QuickCouponCard :type="index+1" :data="item"
                           :style="index === 3 || index === 4 || index === 5 ? 'transform: scale(0.6)' : ''"/>
        </li>
      </ul>
    </div>


    <!-- 配置优惠券的弹窗 -->
    <el-dialog
        title="配置优惠券"
        :visible.sync="dialogVisible"
        width="80%"
    >
      <FlexBox class="edit-coupon">
        <FlexBox flex="1" class="preview">
          <QuickCouponCard :type="selectedCoupon" :data="previewCoupon" :style="scaleStyle"/>
        </FlexBox>
        <FlexBox flex="2" direction="column" class="edit-area">
          <FlexBox center-v v-show="editCoupon.title">
            <div class="label">标题：</div>
            <el-input v-model="editCoupon.title"/>
          </FlexBox>
          <FlexBox center-v>
            <div class="label">券名：</div>
            <el-input v-model="editCoupon.name"/>
          </FlexBox>
          <FlexBox v-show="editCoupon.icon">
            <div class="label">ICON：</div>
            <el-input v-model="editCoupon.icon"/>
          </FlexBox>
          <FlexBox v-show="editCoupon.usage">
            <div class="label">用法：</div>
            <el-input v-model="editCoupon.usage"/>
          </FlexBox>
          <FlexBox v-show="editCoupon.deadline">
            <div class="label">有效期：</div>
            <el-input v-model="editCoupon.deadline"/>
          </FlexBox>
          <FlexBox v-show="editCoupon.convert">
            <div class="label">汇率：</div>
            <el-input v-model="editCoupon.convert"/>
          </FlexBox>
          <FlexBox v-show="editCoupon.desc">
            <div class="label">描述：</div>
            <el-input v-model="editCoupon.desc"/>
          </FlexBox>
          <FlexBox v-show="editCoupon.originPrice">
            <div class="label">原价：</div>
            <el-input v-model="editCoupon.originPrice"/>
          </FlexBox>
          <FlexBox v-show="editCoupon.currentPrice">
            <div class="label">当前价格：</div>
            <el-input v-model="editCoupon.currentPrice"/>
          </FlexBox>
          <FlexBox v-show="editCoupon.discount">
            <div class="label">折率：</div>
            <el-input v-model="editCoupon.discount"/>
          </FlexBox>
          <FlexBox v-show="editCoupon.unit">
            <div class="label">单位：</div>
            <el-input v-model="editCoupon.unit"/>
          </FlexBox>
          <FlexBox v-show="editCoupon.toLock">
            <div class="label">解锁数量：</div>
            <el-input v-model="editCoupon.toLock"/>
          </FlexBox>
        </FlexBox>
      </FlexBox>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">保 存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import QuickCouponCard from "@components/quick-coupon-card/index.vue";
import FlexBox from "@components/flex-box/index";
import CouponService from "@/services/CouponService";
import AppConfig from "@/config/AppConfig";

export default {
  name: "CouponConfig",
  components: {FlexBox, QuickCouponCard},
  data() {
    return {
      wxCoupon: [],
      shopCoupon: [],
      selectedCoupon: '',
      editCoupon: {},
      previewCoupon: {},
      dialogVisible: false
    }
  },
  created() {

  },

  mounted() {
    this.getWxCoupon();
    this.getShopCoupon();
  },
  computed: {
    scaleStyle() {
      return this.selectedCoupon == '4' || this.selectedCoupon == '5' || this.selectedCoupon == '6' ? 'transform: scale(0.8); width: 80%' : ''
    }
  },
  methods: {
    handleSelect(index) {
      this.selectedCoupon = index + 1;
      this.dialogVisible = true;
      let temp = Object.assign({}, this.wxCoupon[index]);
      this.previewCoupon = temp;
      this.editCoupon = temp;
    },
    getWxCoupon() {
      CouponService.getWxCoupon2().then(res => {
        this.wxCoupon = AppConfig.env === 'dev' ? res.slice(0, 3) : res;
      });
    },
    getShopCoupon() {
      CouponService.getShopCoupon().then(res => {
        this.shopCoupon = res;
      });
    }
  },

}
</script>

<style lang="scss" scoped>
.coupon-config {
  padding: 40px;
  .title {
    line-height: 2;
  }
  .coupon-box {
    width: 350px;
    height: 240px;
    padding: 10px 20px;
    border: 2px solid transparent;
    border-radius: 6px;

    &:hover {
      border: 2px solid #28A4F2;
    }
  }

  .select-coupon {
    padding: 20px;

    .selected {
      border: 2px solid #28A4F2;
    }

    ul {
      list-style: none;
      width: 100%;

      li {
        float: left;
        margin-right: 20px;
        margin-bottom: 20px;
      }
    }

    .clearfix::after {
      clear: both;
      content: " ";
    }
  }

  .edit-coupon {
    .preview {
      padding: 20px;
    }

    .edit-area {
      padding: 20px;
      line-height: 4;

      .label {
        width: 100px;
      }
    }
  }
}
</style>
